<template>
	<view>
		<news-nav-bar :tabBars="tabBars" :tabIndex="tabIndex" @changeTab="changeTab"></news-nav-bar>
		<view class="uni-tab-bar">
			<swiper @change="tabChange" :current="tabIndex" :style="{height: contentHeight+'px'}">
				<swiper-item>
					<scroll-view scroll-y v-if="tabIndex==0" class="list" @scrolltolower="loadmore(1)">
						<template v-if="data.length>0">
							<block v-for="(item, idx) in data" :key="idx">
								<common-list :item="item" :idx="idx"></common-list>
							</block>
							<load-more :loadtext="this.loadtext"></load-more>
						</template>
						<template v-else>
							<no-thing></no-thing>
						</template>
						</block>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y v-if="tabIndex==1" class="list" @scrolltolower="loadmore(2)">
						<view class="search-wrap">
							<input type="text" placeholder="搜索内容" class="search" placeholder-class="icon iconfont icon-sousuo input-placeholder">
						</view>
						<view class="banner">
							<swiper scroll-x :autoplay="true" :indicator-dots="true">
								<block v-for="(item,idx) in swiperpic" :key="idx">
								<swiper-item>
									<image :src="item.path" mode="widthFix" lazy-load></image>
								</swiper-item>
								</block>
							</swiper>
						</view>
						<topic-nav :nav="topic.nav" @more="more"></topic-nav>
						<template v-if="topic.list.length>0">
							<view class="list-wrapper">
								<view>最近更新</view>
							<block v-for="(item,idx) in topic.list" :key="idx">
								<topic-list :item="item"></topic-list>
							</block>
							</view>
						<load-more :loadtext="this.loadtext"></load-more>
						</template>
						<template v-else>
							<no-thing></no-thing>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import newsNavBar from '../../components/new/news-nav-bar.vue';
	import commonList from '../../components/common/common-list.vue';
	import loadMore from '../../components/common/load-more.vue';
	import noThing from '../../components/common/no-thing.vue';
	import topicNav from '../../components/new/topic-nav.vue';
	import topicList from '../../components/new/topic-list.vue'
	export default {
		components: {
			newsNavBar,
			commonList,
			loadMore,
			noThing,
			topicNav,
			topicList
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					let height = res.windowHeight - uni.upx2px(100);
					this.contentHeight = height;
				}
			})
		},
		data() {
			return {
				topic:{
					nav: [{
							name: '最新',
							id: 1
						},
						{
							name: '游戏',
							id: 2
						},
						{
							name: '情感',
							id: 3
						},
						{
							name: '打卡',
							id: 4
						},
						{
							name: '故事',
							id: 5
						},
						{
							name: '喜爱',
							id: 6
						},
					],
					list: [{
							title: '#淘宝记录簿#',
							titlepic: "../../static/demo/datapic/1.jpg",
							content: "120斤到85斤 我的反转人生",
							dongtai: 254,
							nowday: 270
						},
						{
							title: '#你亲身经历的灵异事件#',
							titlepic: "../../static/demo/datapic/2.jpg",
							content: "走出去，才发现你跟别人差的不是一点半点",
							dongtai: 577,
							nowday: 821
						},
						{
							title: '#天天大卡#',
							titlepic: "../../static/demo/datapic/3.jpg",
							content: "面试官：你在电梯偶遇马云你会做什么？90后女孩的回答当场被录用",
							dongtai: 507,
							nowday: 707
						},
					],
				},
				swiperpic: [
					{
						path: '../../static/demo/banner2.jpg'
					},
					{
						path: '../../static/demo/banner2.jpg'
					},
					{
						path: '../../static/demo/banner2.jpg'
					}
				],
				loadtext: "上拉加载更多",			
				tabIndex: 0,
				tabBars: [{
						name: '关注',
						id: 'guanzhu'
					},
					{
						name: '话题',
						id: 'huati'
					}
				],
				contentHeight: 500,
				data: [{
						userpic: "../../static/demo/userpic/12.jpg",
						username: "哈哈哈",
						sex: 0, //0男 1女
						age: 24,
						isguanzhu: false,
						title: "我是标题",
						titlepic: "../../static/demo/datapic/13.jpg",
						video: false,
						sharen: false,
						path: "深圳 龙岗",
						sharenum: 20,
						commentnum: 30,
						goodnum: 20
					},
					{
						userpic: "../../static/demo/userpic/12.jpg",
						username: "哈哈哈",
						sex: 1, //0男 1女
						age: 24,
						isguanzhu: false,
						title: "我是标题",
						titlepic: "../../static/demo/datapic/13.jpg",
						video: {
							looknum: "20w",
							long: "2:47"
						},
						sharen: false,
						path: "深圳 龙岗",
						sharenum: 20,
						commentnum: 30,
						goodnum: 20
					},
					{
						userpic: "../../static/demo/userpic/12.jpg",
						username: "哈哈哈",
						sex: 1, //0男 1女
						age: 24,
						isguanzhu: true,
						title: "我是标题",
						titlepic: "../../static/demo/datapic/13.jpg",
						video: false,
						sharen: {
							title: "我是标题",
							titlepic: "../../static/demo/datapic/13.jpg"
						},
						path: "深圳 龙岗",
						sharenum: 20,
						commentnum: 30,
						goodnum: 20
					}
				]
			}
		},
		methods: {
			//点击切换
			changeTab(index) {
				this.tabIndex = index;
			},
			more(){
				uni.navigateTo({
					url: '../topic-nav/topic-nav'
				})
			},
			tabChange(e) {
				this.tabIndex = e.detail.current;
			},
			loadmore(type) {
				if (this.loadtext != "上拉加载更多") return;
				this.loadtext = "加载中...";
				if(type==1){
					setTimeout(() => {
						this.data.push({
							userpic: "../../static/demo/userpic/12.jpg",
							username: "哈哈哈",
							sex: 0, //0男 1女
							age: 24,
							isguanzhu: false,
							title: "我是标题",
							titlepic: "../../static/demo/datapic/13.jpg",
							video: false,
							sharen: false,
							path: "深圳 龙岗",
							sharenum: 20,
							commentnum: 30,
							goodnum: 20
						})
						this.loadtext = "上拉加载更多";
					}, 500)
				}
				else if(type==2){
					setTimeout(() => {
						this.topic.list.push({
							title: '#淘宝记录簿#',
							titlepic: "../../static/demo/datapic/1.jpg",
							content: "120斤到85斤 我的反转人生",
							dongtai: 254,
							nowday: 270
						})
						this.loadtext = "上拉加载更多";
					}, 500)
				}
			}
		}
	}
</script>

<style>
	.search-wrap,
	.banner swiper {
		padding: 20upx 20upx 0 20upx;
	}

	.banner,
	.gategory-wrap {
		border-bottom: 1upx solid #EEE;
	}

	.search {
		background-color: #F4F4F4;
		height: 60upx;
		border-radius: 10upx;
		font-size: 14px;
	}

	.input-placeholder {
		text-align: center;
		font-size: 14px;
	}

	.banner swiper {
		height: 360upx;
	}

	.banner image {
		border-radius: 20upx;
		width: 100%;
		height: 100%;
	}
	.list-wrapper {
		padding: 20upx;
	}
	
	.list-wrapper>view:first-of-type {
		color: #000;
		font-size: 14px;
	}


</style>
